import React, { Component } from 'react';
import context from "../uilt/context"
import { good_list } from "../uilt/api"
import { withRouter } from "react-router-dom"
class Madte extends Component {
    state = {
        catenav: ["综合", "销量", "新品", "价格", "筛选"],
        catelist: [],
        currentIndex: 0,
    }
    componentDidMount() {
        good_list({ id: this.props.location.search.slice(4) }).then((res) => {
            this.setState({
                catelist: res.data.list
            }, () => {
                context.emit("cate", this.state.catelist)
            })
        })
        setTimeout(() => {
            this.setState({
                currentIndex: 0,
            })
        }, 2000);

    }
    handleClick(index) {
        //  触发事件并传值另一兄弟组件
        context.emit("save", index)
        this.setState({
            currentIndex: index,
        })
    }
    render() {
        return (
            <div className='mata'>
                {
                    this.state.catenav.map((item, index) => {
                        return (
                            <div onClick={() => { this.handleClick(index) }} className="name" style={{ color: this.state.currentIndex === index ? "red" : "" }} key={index}>{item}</div>
                        )
                    })
                }
            </div>
        );
    }
}

export default withRouter(Madte);